<template>
    <!--评论消息-->
    <div v-if="getMsgRs.success" style="min-height: 1000px;">
        <!--顶部当前页面提示  和  清空所有消息-->
        <el-row type="flex" justify="space-between" class="top_row">
            <el-col :span="15">
                <h1 class="font">评论我的</h1>
            </el-col>
            <el-col :span="5" class="right">
                <el-link type="primary" :underline="false" class="margin_top_8" @click="truncateMsg">清空所有消息</el-link>
            </el-col>
        </el-row>
        <el-divider></el-divider>

        <!--中间的消息条目列表-->
        <div class="msg_container">
            <div v-for="msg in pageList" :key="msg.id" class="font">
                <el-row :class="msg.showCssClass + ' msg_row' ">
                    <!--左边评论人头像-->
                    <el-col :span="2">
                        <!--                        <el-avatar :src="require('../../../assets/images/userAvatarDemo.jpg')"></el-avatar>-->
                        <el-avatar :size="55" :src="msg.fromUser.headImg"></el-avatar>
                    </el-col>

                    <!--中间模块-->
                    <el-col :span="18">
                        <!--谁评论了我的帖子-->
                        <el-row>
                            <el-link type="info" @click="toMyIndex(msg.fromUser.uname)">{{msg.fromUser.nickName}}</el-link>
                            <span class="margin_left_16">评论了你的帖子</span>
                        </el-row>
                        <!--评论内容，超过长度以三点表示-->
                        <el-row class="margin_top_5 margin_bottom_12">
                            <el-link type="info" >
                                <span class="color_main_font font_weight_700 ">{{msg.postReply.content}}</span>
                            </el-link>
                        </el-row>
                        <!--帖子标题-->
                        <el-row>
                            <el-link type="info" :underline="false" :href="'/postInfo?pid=' + msg.post.id" target="_blank">
                                <span>{{msg.post.title}}</span>
                            </el-link>
                        </el-row>
                    </el-col>

                    <!--右边评论时间-->
                    <el-col :span="3" >
                        <!--                            <span>2022-5-3</span>-->
                        <!--固定到底部-->
                        <div class="font_size_15 color_gray_info msg_time">{{msg.sdfTime}}</div>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
            </div>
        </div>

        <!--如果获取的当前分页的结果数量没到默认分页大小  则显示没有更多-->
        <div v-if="currentSize < pageSize">
            <el-empty description="没有更多了.."></el-empty>
        </div>

        <!--下面的分页-->
        <el-row class="center pg_row">
            <el-col>
                <el-pagination
                        background
                        @current-change="updateListWithPage"
                        :current-page.sync="currentPage"
                        :page-size="pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="totalRs">
                </el-pagination>
            </el-col>
        </el-row>
    </div>

    <!-- 获取消息列表出问题时显示 （用户未登录、处理发生异常等） -->
    <div v-else>
        <el-result icon="info" title="错误提示" :subTitle="getMsgRs.msg">
        </el-result>
    </div>
</template>

<script>
    export default {
        name: "comment",
        inject: ['setMsgUnreadNumsByType'],
        data() {
            return {
                // 分页相关
                currentPage: 1, //当前页，默认为 1
                pageSize: 10,  // 页大小， 默认为 10
                totalRs: 0, // 搜索结果总的条目数
                currentSize: 0, // 当前list（无论是帖子还是贴吧什么）当前（分）页的数量，初始化为0

                // 获取消息列表结果
                getMsgRs: {
                    success: true,  // 成功从后台获取到消息列表信息
                    msg: '', //从后台获取  消息列表信息失败时 携带的错误提示信息
                },

                commentList: [], // 获取的消息列表  总的消息列表
                pageList: [], // 当前渲染的 分页消息列表
                msgType: 1, /*消息类型   1评论 2回复 3点赞 4收藏*/
            }
        },
        created() {  /*加载页面时执行*/
            // 根据分页获取当前登录用户的评论消息列表  (初始获取第一页)
            this.getMsgListByType();

        },
        mounted() {

        },
        methods: {
            // 跳转至用户个人主页
            toMyIndex(uname){
                let routeUrl = this.$router.resolve({
                    path: "/myIndex",
                    /*这样传递的参数  好像会在地址栏显示出来*/
                    query: {uname: uname},  //通过 query（params不行） 传参   在目标页面通过 this.$route.query.type 来接收参数
                });

                //在当前页打开
                window.open(routeUrl.href, "_blank");
            },

            /*清空消息列表*/
            truncateMsg(){
                // 检查是否有消息
                if (this.commentList.length === 0){
                    this.$message('暂无评论消息，无需清空！');
                    return;
                }

                // 是否确定清空
                this.$confirm('此操作将永久删除该类型的消息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => { // 确定清空
                    this.$http.delete(this.GLOBAL.serverBaseUrl + this.GLOBAL.msgTruncate + "?msgType=" + this.msgType).then(req => {
                        if (req.data !== '') {
                            if (req.data.result_code === 200) { /*成功操作*/
                                this.$message({
                                    message: req.data.msg,
                                    type: 'success',
                                    duration: 4000,  /*持续4 秒，默认是 3秒*/
                                });

                                this.commentList = [];
                                this.pageList = [];
                                this.totalRs = 0;
                            } else if (req.data.result_code === 301){ /*清除的消息数量 < 1*/
                                this.$message({
                                    duration: 0,  //  不会自动关闭
                                    showClose: true,
                                    message: req.data.msg,
                                    type: 'warning'
                                });
                            }else {  /* 出现异常等清空*/
                                this.$message({
                                    duration: 0,  //  不会自动关闭
                                    showClose: true,
                                    message: req.data.msg + "错误码： " + req.data.result_code,
                                    type: 'error'
                                });
                            }
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: '糟糕，服务器出事了。。',
                                duration: 0,   /*出错则设置为不自动关闭*/
                            });
                        }
                    });
                }).catch(() => {  /*点击取消*/

                });
            },

            /*更新当前 消息分页列表*/
            updateListWithPage(index) {
                // 更新当前要渲染的 页面 评论列表
                this.pageList = [];
                // 根据 下标截取数组  包左不包右
                this.pageList = this.commentList.slice((index - 1) * this.pageSize, index * this.pageSize);
                // 更新当前页大小  如果没有到页大小则显示没有更多
                this.currentSize = this.pageList.length;
            },

            /* 根据类型获取消息列表*/
            getMsgListByType() {
                // 更新 url 拼接 消息类型、分页 参数
                let getMsgListUrl = this.GLOBAL.serverBaseUrl + this.GLOBAL.msgGetList;
                getMsgListUrl += "?msgType=" + this.msgType;

                // 向后台请求数据
                this.$http.get(getMsgListUrl).then(req => {
                    if (req.data !== "") {
                        if (req.data.rs.result_code === 200) { /*查询成功   */
                            let list = req.data.list;
                            /*处理 通知人头像图片地址 + 时间格式化*/
                            for (let i = 0; i < list.length; i++) {
                                /*头像*/
                                let headImg = list[i].fromUser.headImg;
                                headImg = this.GLOBAL.serverBaseUrl + this.GLOBAL.userHeadImg + headImg;
                                list[i].fromUser.headImg = headImg;
                                // console.log("head:" + list[i].fromUser.headImg);

                                // 通知时间
                                let dateTime = new Date(list[i].informTime);
                                // list[i].sdfTime = dateTime.getFullYear() + '-' + (dateTime.getMonth() + 1) + '-' + dateTime.getDate() + ' ' + dateTime.getHours() + ':' + dateTime.getMinutes();
                                list[i].sdfTime = dateTime.getFullYear() + '-' + (dateTime.getMonth() + 1) + '-' + dateTime.getDate();

                                // 处理消息背景色
                                list[i].showCssClass = list[i].readen === 0 ? "unreaden_msg" : "readen_msg";
                            }

                            this.commentList = list;
                            this.totalRs = list.length;
                            // 填充当前分页数组 (默认加载第一页)
                            this.updateListWithPage(1);

                            // 因为获取的消息列表时是按照通知时间 倒序排列的，
                            // 而按照本系统需求设计（打开某一消息列表一定将当前消息类型未读数清零，不存在有几天前的未读消息没有读的情况）
                            // 未读消息一定排列在消息列表顶部， 通知时间最新的那些，如果第一条是已读那么就没有未读消息了，反之
                            if (list.length > 0 && list[0].readen === 0) {
                                // 有未读消息则请求后端将当前用户的该类型未读消息都设置为  已读
                                this.setMsgsRead();
                            }
                        } else {  /*查询失败*/
                            this.getMsgRs.success = false;
                            this.getMsgRs.msg = req.data.rs.msg + " -- " + req.data.rs.result_code;
                        }
                    } else {
                        this.getMsgRs.success = false;
                        this.getMsgRs.msg = '糟糕，服务器出事了。。';
                    }
                });
            },

            /*设置当前消息类型的未读消息都设置为 已读*/
            setMsgsRead() {
                this.$http.patch(this.GLOBAL.serverBaseUrl + this.GLOBAL.msgSetRead + "?msgType=" + this.msgType).then(req => {
                    if (req.data !== '') {
                        if (req.data.result_code === 200) { /*成功操作*/
                            // 设置父页面的对应类型的消息未读数为 0
                            this.setMsgUnreadNumsByType(this.msgType, 0);
                        } else {
                            this.$message({
                                duration: 0,  //  不会自动关闭
                                showClose: true,
                                message: req.data.msg + "错误码： " + req.data.result_code,
                                type: 'error'
                            });
                        }
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '糟糕，服务器出事了。。',
                            duration: 0,   /*出错则设置为不自动关闭*/
                        });
                    }
                });
            }
        },
        components: {}
    }
</script>

<style scoped>
    /*标题*/
    h1 {
        font-size: 20px;
    }

    /*顶行的  评论h1   row*/
    .top_row{
        padding: 20px 18px 0 18px;
    }

    /*中间的消息列表的最外层 div*/
    .msg_container{
        padding: 0 10px;
    }

    /*每一条消息的row  不包括分割线*/
    .msg_row{
        padding: 12px 20px;
        border-radius: 5px
    }

    /*每条消息右下角的  通知时间*/
    .msg_time{
        position: absolute;
        bottom: 12px
    }

    /*底部的  分页行*/
    .pg_row{
        margin: 40px 0px;
    }


</style>